<template>
  <div id="welcome">
 <el-table v-loading="logTableLoading" :data="tableData" border style="margin:0 0 20px 0">
    <el-table-column prop="username" label="登入账号"  />
    <el-table-column prop="nowLogin.ip" label="本次登入ip"  />
    <el-table-column prop="nowLogin.loginTime" label="本次登入时间" sortable />
    <el-table-column prop="lastLogin.ip" label="上次登入ip"  />
    <el-table-column prop="lastLogin.loginTime" label="上次登入时间" sortable />
  </el-table>
  <el-pagination hide-on-single-page background layout="prev, pager, next" :total="100" 
  :current-page = "pageData.page" :page-size="pageData.count"
  @current-change="handleSizeChange"
       />
  </div>
</template>
<script setup>
 import { getLoginLogApi } from '../../../api/users';
 import { ref, onMounted ,reactive} from 'vue';
 const tableData = ref([]);
 let pageData = reactive({
    page:1,
    count:10
  })
 let handleSizeChange = (page) =>{
    pageData.page = page
    getLoginLog(pageData)
}
    let logTableLoading = ref(false);
 let getLoginLog = async (params=pageData) => {
    try {
        logTableLoading.value = true;
        const res = await getLoginLogApi(params);
        console.log(res);
        tableData.value = res.data.data;
        logTableLoading.value = false;
    } catch (error) {
        console.log(error);
        logTableLoading.value = false;
    }
 }
    onMounted(() => {
     getLoginLog();
    });


</script>
